<br>
<div class="ui container">
  <div class="ui header">
    新建角色
  </div>
  <div class="ui segment">
    <% form_tag url(:roles, :create), :class=>"ui large form" do %>
      <div class="field">
        <label>角色名</label>
        <%= input_tag :name,  :value => '', :placeholder => "角色名"  %>
      </div>
      <div class="field">

        <label>勾选权限</label>
        <div class="ui divider">

        </div>
        <table class="ui definition table">
          <thead>
            <tr><th></th>
            <th>新建</th>
            <th>编辑</th>
            <th>读取</th>
            <th>删除</th>
          </tr></thead>

          <tbody>
            
            <tr>
              <td>图片管理</td>

              <td>
                <div class="ui child checkbox" ref="picture" value="0">
                  <input type="checkbox" ref="picture" value="0">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="picture" value="1">
                  <input type="checkbox" ref="picture" value="1">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="picture" value="2">
                  <input type="checkbox" ref="picture" value="2">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="picture" value="3">
                  <input type="checkbox" ref="picture" value="3">
                  <label for=""></label>
                </div>
              </td>
            </tr>
            <tr>
              <td>门店管理</td>

              <td>
                <div class="ui child checkbox" ref="shop" value="0">
                  <input type="checkbox" ref="shop" value="0">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="shop" value="1">
                  <input type="checkbox" ref="shop" value="1">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="shop" value="2">
                  <input type="checkbox" ref="shop" value="2">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="shop" value="3">
                  <input type="checkbox" ref="shop" value="3">
                  <label for=""></label>
                </div>
              </td>
            </tr>
            <tr>
              <td>留言管理</td>

              <td>
                <div class="ui child checkbox" ref="note" value="0">
                  <input type="checkbox"  ref="note" value="0">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="note" value="1">
                  <input type="checkbox" ref="note" value="1">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="note" value="2">
                  <input type="checkbox" ref="note" value="2">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="note" value="3">
                  <input type="checkbox" ref="note" value="3">
                  <label for=""></label>
                </div>
              </td>
            </tr>
            <tr>
              <td>用户管理</td>

              <td>
                <div class="ui child checkbox" ref="user" value="0">
                  <input type="checkbox" ref="user" value="0">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="user" value="1">
                  <input type="checkbox" ref="user" value="1">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="user" value="2">
                  <input type="checkbox" ref="user" value="2">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="user" value="3">
                  <input type="checkbox" ref="user" value="3">
                  <label for=""></label>
                </div>
              </td>
            </tr>
            <tr>
              <td>管理系统用户</td>

              <td>
                <div class="ui child checkbox" ref="admin" value="0">
                  <input type="checkbox" ref="admin" value="0">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="admin" value="1">
                  <input type="checkbox" ref="admin" value="1">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="admin" value="2">
                  <input type="checkbox" ref="admin" value="2">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="admin" value="3">
                  <input type="checkbox" ref="admin" value="3">
                  <label for=""></label>
                </div>
              </td>
            </tr>
            <tr>
              <td>角色管理</td>

              <td>
                <div class="ui child checkbox" ref="role" value="0">
                  <input type="checkbox" ref="role" value="0">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="role" value="1">
                  <input type="checkbox" ref="role" value="1">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="role" value="2">
                  <input type="checkbox" ref="role" value="2">
                  <label for=""></label>
                </div>
              </td>
              <td>
                <div class="ui child checkbox" ref="role" value="3">
                  <input type="checkbox" ref="role" value="3">
                  <label for=""></label>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <input type="hidden" name="acl" id="acl"
      value="post|0000||picture|0000||shop|0000||note|0000||user|0000||admin|0000||role|0000"
      />
      <div class="ui buttons">
        <button type="submit" href="/webadmin/role" class="ui green basic button">保存</button>
        <a href="/webadmin/role" class="ui basic red button">返回</a>
      </div>
  <% end %>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    var acl = $("#acl").val();
    $(".checkbox").each(function(){

      var ref = $(this).attr("ref");
      var val = $(this).attr("value");
      val++;

      var regx = new RegExp(ref+'\\|\\d{4}');
      var item = acl.match(regx)[0];
      var startIndex = acl.indexOf(ref+"|")+ref.length+val;


        $(this).checkbox({
          onChecked: function() {
            var aclArray = acl.split('');
            aclArray[startIndex] = 1;
            acl = aclArray.join('');
            $("#acl").val(acl);

        },
        onUnchecked: function() {
          var aclArray = acl.split('');
          aclArray[startIndex] = 0;
          acl = aclArray.join('');
          $("#acl").val(acl);
        },
      });
    });
  });
</script>
